<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>木兰辞</h4>
        <span @click="changeShow" class="btn" >
         {{isShow ? '收起':"展开"}}
        </span>
      </div>
      <div v-show="isShow" class="container">
        <p>唧唧复唧唧,</p>
        <p>木兰汗唧唧。</p>
        <p>不闻唧酥声，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      isShow:true
    };
  },

  methods: {
    changeShow(){
       this.isShow= !this.isShow
    }
   
  },
};
</script>

<style lang="scss" scoped>

</style>